<template>
    <div style="position: fixed;z-index: 100;">
       
       <TitleLenged
              :isShow="isShowTitle"
              :titleText="titleText"
            ></TitleLenged>
      <timeline
              
              :swiperSlides="yearlist"
              :swiperOption="swiperOption"
              @watchTimeLine="timelineOnClick"
            ></timeline>
            <CostomProgress
        :title="c_title"
        :modal2Visible="c_visable"
        :percent="c_percent"
      ></CostomProgress>
    </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
import timeline from '../timeline/timeline.vue';
import TitleLenged from '../mainContent/TitleLenged.vue';
import CostomProgress from '../progress/index.vue';
import * as mapOper from '../../scripts/mapOper.js';
export default {
  name:'R10104',
  computed: {
    ...mapGetters(['map'])
  },
  data() {
    return {
      
      //时间轴中的数据
      yearlist: [],
      //时间轴中swiperOption
      swiperOption: {
        slidesPerView: 10,
        spaceBetween: 0,
        slidesPerGroup: 10,
        loop: true,
        loopFillGroupWithBlank: true,

        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      //传递到时间轴组件中的数据
      swiperSlides: [],
      
      //当前选中的时间
      currentYear: '',
      // 是否显示标题
      isShowTitle: false,
      // 标题内容
      titleText: '',
      //自定义进度条数据
      c_title: '',
      c_percent: 0,
      c_visable: false,

    };
  },
  components: {
    TitleLenged,
    timeline,
    CostomProgress
  },
  mounted: function() {
    /**
     * 清除地图
     */
    if (this.map) {
      let map = mapOper.removeAllLayers(this.map);
      this.changeMap({ map: map });

      let imap = mapOper.removeInteractions(this.map);
      this.changeMap({ map: imap });
      let omap = mapOper.removeAllOverlay(this.map);
      this.changeMap({ map: omap });
      
      this.yearlist = [
        '2018_02',
        '2017_09',
        '2016_06',
        '2015_09',
        '2014_07',
        '2013_06',
        '2011_06',
        '2010_06',
        '2009_06',
        '2008_09',
        '2007_07',
        '2006_08',
        '2005_06',
        '2004_09',
        '2003_05',
        '2002_06',
        '2001_06',
        '2000_10',
        '1999_08',
        '1998_10',
        '1997_05',
        '1995_06',
        '1994_08',
        '1993_06',
        '1992_08',
        '1991_08',
        '1989_07',
        '1988_09'
      ];

      this.timelineOnClick('2018_02');
    } else {
      this.$router.push({  //核心语句
        path:'R101.html',   //跳转的路径
      });
    }
  },
  methods:{
    ...mapActions(['changeMap', 'changeLengedTitle']),
    timelineOnClick(item) {
      
      this.currentYear = item;
      let mapfileName='wuhai-raster';
      let currtext = '热红外';
      
      let params = {
        map: this.map,
        mapfile:mapfileName,
        layerName: 'wuhai_IR_' + this.currentYear,
        coordinate:[36401859.825, 4371259.970]
      };
      let map = mapOper.loadRasterLayer(params);
      this.changeMap({ map: map });
      this.isShowTitle = true;
      let titleyear = this.currentYear.split('_');
      this.titleText =
        '乌海' + titleyear[0] + '年' + titleyear[1] + '月' + currtext + '数据';
      let lsTitle = {isShow: true,title: '123'};
      this.changeLengedTitle({ lengedTitle: lsTitle });
    }
  }

};
</script>

